<template>
	<view class="score_box">
		<view class="obj2" @click="detail(v.id)" v-for="(v,i) in list">
			<view class="cont">
				<image :src="v.pic"></image>
				<!-- 渲染层有错误 -->
				<view>{{v.productName}}</view>
				<view>{{v.scoreNum}}</view>
				<view>积分</view>
			</view>
		</view>
		<view class="bot">我也是有底线的~~~</view>
	</view>
</template>

<script>
	import http from '@/utils/http.js'
	export default {
		data() {
			return {
				list:[
					{
						id:'',
						productName:'',
						scoreNum:'',
						shopID:'',
						pic:''
					}
				]
			}
		},
		onShow() {
			this.getgoods();
		},
		methods: {
			detail(id){
				uni.setStorageSync('scoreShopId',id);
				let scoreShopId=uni.getStorageSync('scoreShopId')
				console.log("id:",id)
				console.log("scoreShopId:",scoreShopId)
				uni.navigateTo({
					url:'/pages/detail/detail?scoreShopId=id',
					// ?id=state
				})
			},
			getgoods(){
				http({
					url:'/getgoods',
					success:(res)=>{
						// console.log(res)
						if(res.data){
							this.list=res.data.data;
						}
					}
				})
			}
		}
	}
</script>

<style>
	.score_box {
		/* margin: 0%; */
		width: 100%;
		height: 1900rpx;
		background-color: white;
		/* position: relative; */
	}

	.page{
		text-align: center;
	}

	.obj2 {
		width: 320rpx;
		height: 320rpx;
		/* position: absolute; */
		margin: 20rpx 20rpx;
		display: inline-block;
	}
	.cont{
		width: 100%;
		height: 100%;
		background-color: white;
		display: inline-block;
		/* position: absolute; */
		border-radius: 10px;
		margin: 20rpx 20rpx;
	}

	.obj2 .cont image{
		width: 100%;
		height: 60%;
	}
	.obj2 .cont view:nth-child(2){
		font-size: 30rpx;
		color: #333;
		margin-top: 14rpx;
		margin-left: 20rpx;
	}
	.obj2 .cont view:nth-child(3){
		font-size: 30rpx;
		color: #f77214;
		margin-top: 12rpx;
		margin-left: 20rpx;
		display: inline-block;
	}
	.obj2 .cont view:nth-child(4){
		font-size: 24rpx;
		color: #999;
		margin-top: 12rpx;
		margin-left: 10rpx;
		display: inline-block;
	}
	.bot{
		font-size: 28rpx;
		color: #999;
		text-align: center;
		margin-top: 20rpx;
	}
</style>
